<template>
  <view class="profile-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">我的</text>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image class="avatar" src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-6OJaA6L3x94xWBy0AfxQv40ry9zXuU.png" mode="aspectFill"></image>
        <text class="username">今天没有彩虹糖</text>
      </view>
      <view class="arrow">
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    
    <!-- 设置区域 -->
    <view class="section-container">
      <view class="section-title">设置</view>
      <view class="menu-list">
<!--        <view class="menu-item" @click="navigateTo('/pages/widgets/index')">
          <view class="menu-icon yellow">
            <text class="iconfont icon-widget"></text>
          </view>
          <view class="menu-text">小组件</view>
          <view class="arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view> -->
        
        <view class="menu-item" @click="navigateTo('/pages/notifications/notifications')">
          <view class="menu-icon pink">
            <svg xmlns="http://www.w3.org/2000/svg" width="47.385" height="59.099" viewBox="0 0 47.385 59.099" fill="none">
              <path d="M44.0495 27.7105C44.0295 19.1805 38.6895 11.5705 30.6695 8.64051L30.6695 6.14051C30.6695 2.77051 27.5395 0.0205078 23.6795 0.0205078C19.8295 0.0205078 16.6895 2.77051 16.6895 6.14051L16.6895 8.64051C8.67951 11.5705 3.32951 19.1805 3.31951 27.7105L3.31951 42.6305L2.05951 42.6305C1.32951 42.6205 0.649512 43.0105 0.279512 43.6405C-0.0904883 44.2805 -0.0904883 45.0605 0.279512 45.6905C0.649512 46.3205 1.32951 46.7105 2.05951 46.7005L45.2995 46.7005C46.0395 46.7105 46.7195 46.3205 47.0895 45.6905C47.4595 45.0605 47.4595 44.2805 47.0895 43.6405C46.7195 43.0105 46.0395 42.6205 45.2995 42.6305L44.0495 42.6305L44.0495 27.7105ZM26.5929 7.61791L26.5929 6.13791C26.5929 5.02791 25.2629 4.08791 23.6829 4.08791C22.1029 4.08791 20.7729 5.02791 20.7729 6.13791L20.7729 7.61791C22.7029 7.33791 24.6629 7.33791 26.5929 7.61791ZM39.967 27.7187L39.967 42.6287L7.39701 42.6287L7.39701 27.7187C7.39701 18.7187 14.687 11.4287 23.677 11.4287C32.677 11.4287 39.967 18.7187 39.967 27.7187Z" fill-rule="evenodd" fill="#FE748B"></path>
              <path d="M23.7791 59.0242C19.2251 59.033 15.5222 55.355 15.5015 50.7998C15.5212 49.6853 16.4309 48.7915 17.5454 48.7915C18.6609 48.7915 19.5706 49.6853 19.5901 50.7998C19.6101 53.1003 21.4797 54.9539 23.78 54.9539C26.0803 54.9539 27.95 53.1003 27.9709 50.7998C27.9895 49.6853 28.8992 48.7915 30.0149 48.7915C31.1292 48.7915 32.0388 49.6853 32.0586 50.7998C32.0388 55.355 28.334 59.0339 23.7791 59.0242L23.7791 59.0242Z" fill-rule="evenodd" fill="#FE748B"></path>
            </svg>
          </view>
          <view class="menu-text">提醒管理</view>
          <view class="arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
        
<!--        <view class="menu-item" @click="navigateTo('/pages/navigation/index')">
          <view class="menu-icon purple">
            <text class="iconfont icon-navigation"></text>
          </view>
          <view class="menu-text">导航设置</view>
          <view class="arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
        
        <view class="menu-item" @click="navigateTo('/pages/sync/index')">
          <view class="menu-icon blue">
            <text class="iconfont icon-sync"></text>
          </view>
          <view class="menu-text">多设备同步</view>
          <view class="arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view> -->
      </view>
    </view>
    
    <!-- 其他区域 -->
    <view class="section-container">
      <view class="section-title">其他</view>
      <view class="menu-list">
        <view class="menu-item" @click="navigateTo('/pages/invite/index')">
          <view class="menu-icon yellow">
            <svg xmlns="http://www.w3.org/2000/svg" width="46.202" height="48.423" viewBox="0 0 46.202 48.423" fill="none">
              <path d="M0 0L46.2016 0L46.2016 48.4231L0 48.4231L0 0Z"></path>
              <g mask="url(#mask-RIB5ZzlD4wuPSHNIgLFej)">
                <path d="M33.8619 0.00389453C38.3419 0.00389453 41.9719 3.64389 41.9819 8.12389L41.9819 18.1839C42.7119 18.1339 43.4419 18.3039 44.0919 18.6539C45.3619 19.3439 46.1519 20.6739 46.1519 22.1139L46.1519 40.2439C46.1419 44.7239 42.5119 48.3539 38.0319 48.3539L8.11194 48.3539C3.63194 48.3539 0.00194336 44.7239 -0.00805664 40.2439L-0.00805664 22.1439C-0.00805664 21.0139 0.471943 19.9339 1.31194 19.1939C2.16194 18.4439 3.29194 18.0939 4.41194 18.2339L4.41194 8.12389C4.41194 3.64389 8.04194 0.00389453 12.5219 0.00389453L33.8619 0.00389453ZM8.12964 20.1656L8.12964 8.1256C8.12964 5.69559 10.0996 3.72559 12.5296 3.72559L33.8596 3.72559C36.2896 3.72559 38.2496 5.69559 38.2596 8.1256L38.2596 19.9656L23.0796 29.7356C22.9996 29.7856 22.9096 29.7856 22.8296 29.7356L8.12964 20.1656ZM33.3762 8.83199C34.3962 8.83199 35.2362 9.66199 35.2362 10.692C35.2362 11.722 34.3962 12.552 33.3762 12.552L21.4762 12.552C20.4462 12.552 19.6162 11.722 19.6162 10.692C19.6162 9.66199 20.4462 8.83199 21.4762 8.83199L33.3762 8.83199ZM33.3741 15.6982C34.4041 15.6982 35.2341 16.5282 35.2341 17.5582C35.2341 18.5882 34.4041 19.4182 33.3741 19.4182L13.0741 19.4182C12.0441 19.4182 11.2141 18.5882 11.2141 17.5582C11.2141 16.5282 12.0441 15.6982 13.0741 15.6982L33.3741 15.6982ZM42.4243 22.1197L42.4243 40.2397C42.4243 42.6697 40.4543 44.6297 38.0343 44.6397L8.11434 44.6397C5.68434 44.6397 3.71434 42.6697 3.71434 40.2397L3.71434 22.1397C3.71434 22.0597 3.75434 21.9797 3.83434 21.9397C3.86434 21.9297 3.90434 21.9197 3.94434 21.9097C3.98434 21.9197 4.02434 21.9297 4.06434 21.9497L20.8043 32.8497C22.1043 33.6997 23.7843 33.6997 25.0943 32.8597L42.0743 21.9297C42.1443 21.8797 42.2343 21.8797 42.3043 21.9197C42.3843 21.9597 42.4343 22.0297 42.4243 22.1197Z" fill-rule="evenodd" fill="#FFCD00"></path>
              </g>
              <defs>
                <mask id="mask-RIB5ZzlD4wuPSHNIgLFej" style="mask-type:alpha" maskUnits="userSpaceOnUse">
                  <path fill="white" d="M0 0L46.2016 0L46.2016 48.4231L0 48.4231L0 0Z"></path>
                </mask>
              </defs>
            </svg>
          </view>
          <view class="menu-text">邀请好友</view>
          <view class="arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
        
        <view class="menu-item" @click="navigateTo('/pages/faq/index')">
          <view class="menu-icon green">
            <svg xmlns="http://www.w3.org/2000/svg" width="49.863" height="49.863" viewBox="0 0 49.863 49.863" fill="none">
              <path d="M24.9299 0C11.1838 0 0 11.184 0 24.9329C0 35.1989 6.44092 44.562 16.0288 48.228C17.1299 48.6479 18.3718 48.0959 18.7949 46.9919C19.2178 45.8849 18.666 44.6459 17.5588 44.223C9.62085 41.187 4.28687 33.435 4.28687 24.9329C4.28687 13.548 13.548 4.28693 24.9299 4.28693C36.312 4.28693 45.573 13.548 45.573 24.9329C45.573 35.592 37.4519 44.391 27.075 45.465L27.075 40.5419C27.075 39.36 26.1149 38.4 24.9299 38.4C23.7449 38.4 22.7849 39.36 22.7849 40.5419L22.7849 47.7209C22.7849 48.903 23.7449 49.8629 24.9299 49.8629C38.6759 49.8629 49.8629 38.6789 49.8629 24.9329C49.86 11.184 38.6759 0 24.9299 0L24.9299 0Z" fill-rule="evenodd" fill="#1EBD85"></path>
              <path d="M27.3088 26.9281C24.984 29.0552 22.7849 31.0621 22.7849 33.5851C22.7849 34.7672 23.7449 35.7301 24.9299 35.7301C26.1149 35.7301 27.075 34.7731 27.075 33.5881C27.126 32.9042 29.0519 31.1461 30.2009 30.0961C32.8408 27.6842 35.8348 24.9481 35.8348 21.3811C35.8348 15.3691 30.9419 10.4761 24.9299 10.4761C18.918 10.4761 14.0249 15.3691 14.0249 21.3811C14.0249 22.5632 14.985 23.5231 16.1699 23.5231C17.355 23.5231 18.312 22.5632 18.312 21.3811C18.312 17.7332 21.282 14.7632 24.9299 14.7632C28.578 14.7632 31.548 17.7332 31.548 21.3811C31.548 23.0581 29.199 25.2032 27.3088 26.9281L27.3088 26.9281Z" fill-rule="evenodd" fill="#1EBD85"></path>
            </svg>
          </view>
          <view class="menu-text">常见问题</view>
          <view class="arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 微清单介绍 -->
    <view class="learn-more" @click="navigateTo('/pages/about/index')">
      <view class="learn-more-icon purple">
        <svg xmlns="http://www.w3.org/2000/svg" width="62.042" height="34.48" viewBox="0 0 62.042 34.48" fill="none">
          <path d="M60.9316 6.50617L39.5776 33.2339L39.561 33.2471C38.6694 33.9673 37.5918 34.3731 36.4468 34.4214L36.4282 34.4214C35.4238 34.4214 34.4399 34.013 33.7334 33.3038L17.7822 17.355C16.2993 15.8668 16.3018 13.4488 17.7876 11.9654C19.2705 10.48 21.689 10.4771 23.1772 11.96L36.6221 25.4048L55.5366 1.1109C57.0249 -0.372008 59.4429 -0.369567 60.9263 1.11383C62.4121 2.59943 62.4146 5.01764 60.9316 6.50617L60.9316 6.50617Z" fill-rule="evenodd" fill="#7766E7"></path>
          <path d="M28.8868 27.3174L22.8899 33.3062C21.9978 34.0262 20.9204 34.4319 19.7759 34.4803C18.7495 34.4803 17.7688 34.0718 17.0596 33.3626L1.10843 17.4139C-0.372036 15.9256 -0.369595 13.5076 1.11649 12.0215C2.59964 10.5386 5.01761 10.536 6.50589 12.0164L19.9478 25.4637L23.489 21.9251L28.8868 27.3174L28.8868 27.3174Z" fill-rule="evenodd" fill="#7766E7"></path>
        </svg>
      </view>
      <view class="learn-more-text">进一步了解"日功"</view>
      <view class="arrow">
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    <!-- Bottom Navigation Bar -->
    <bottom-navigation 
      :defaultIndex="2"
      @nav-click="onNavItemClick"
      @fab-click="onFabClick" />
  </view>
</template>

<script>
import BottomNavigation from '@/components/BottomNavigation/BottomNavigation.vue';

export default {
  components: {
    BottomNavigation
  },
  data() {
    return {
     
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    onNavItemClick(index) {
      console.log('导航项点击:', this.navItems[index].name);
    },
    onFabClick() {
      console.log('添加新任务');
    }
  }
}
</script>

<style lang="scss">
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  position: relative;
}

.header {
  padding: 80rpx 40rpx 20rpx;
  
  .title {
    font-size: 71rpx;
    font-weight: 700;
    line-height: 99.4rpx;
    color: #111111;
  }
}

.user-card {
  margin: 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .username {
      font-size: 32rpx;
    }
  }
}

.section-container {
  margin: 30rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
  }
  
  .menu-list {
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      
      &.yellow {
        background-color: #FFF8E1;
        color: #FFC107;
      }
      
      &.pink {
        background-color: #FCE4EC;
        color: #E91E63;
      }
      
      &.purple {
        background-color: #EDE7F6;
        color: #673AB7;
      }
      
      &.blue {
        background-color: #E3F2FD;
        color: #2196F3;
      }
      
      &.green {
        background-color: #E8F5E9;
        color: #4CAF50;
      }
      
      .iconfont {
        font-size: 36rpx;
      }
      
      svg {
        width: 36rpx;
        height: 36rpx;
      }
    }
    
    .menu-text {
      flex: 1;
      font-size: 30rpx;
    }
  }
}

.learn-more {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  
  .learn-more-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    background-color: #EDE7F6;
    color: #673AB7;
    
    .iconfont {
      font-size: 36rpx;
    }
    
    svg {
      width: 36rpx;
      height: 36rpx;
    }
  }
  
  .learn-more-text {
    flex: 1;
    font-size: 30rpx;
  }
}

.arrow {
  color: #ccc;
  
  .iconfont {
    font-size: 36rpx;
  }
}
</style>